<template>
  <div>
    <!-- 返回仪表盘按钮 -->
    <el-button type="primary" @click="navigateToDashboard" icon="el-icon-arrow-left">返回仪表盘</el-button>
    <!-- 添加商品按钮 -->
    <el-button type="success" @click="showAddProductDialog" icon="el-icon-plus">添加商品</el-button>
    <!-- 商品名搜索框 -->
    <div style="opacity: 0.8;">
      <el-input v-model="searchQuery" placeholder="输入商品名查找" style="margin: 20px 0;"></el-input>
    </div>

    <!-- 添加商品对话框 -->
    <el-dialog title="添加商品" :visible.sync="addProductDialogVisible">
      <el-form :model="newProduct" @submit.native.prevent="addProduct" :rules="rules" ref="newProductForm">
        <el-form-item label="商品名" prop="name">
          <el-input v-model="newProduct.name"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="newProduct.price"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="newProduct.stock"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addProduct">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑商品对话框 -->
    <el-dialog title="编辑商品" :visible.sync="editProductDialogVisible">
      <el-form :model="editProductData" @submit.native.prevent="updateProduct" :rules="rules" ref="editProductForm">
        <el-form-item label="商品名" prop="name">
          <el-input v-model="editProductData.name"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editProductData.price"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="editProductData.stock"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateProduct">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div style="opacity: 0.8;">
      <!-- 商品列表 -->
      <el-table :data="filteredProducts" style="margin-top: 20px;">
        <el-table-column prop="id" label="商品ID"></el-table-column>
        <el-table-column prop="name" label="商品名"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button size="mini" type="primary" @click="openEditProductDialog(scope.$index)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button size="mini" type="danger" @click="deleteProduct(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addProductDialogVisible: false, // 控制添加商品对话框显示状态
      editProductDialogVisible: false, // 控制编辑商品对话框显示状态
      newProduct: { // 新商品数据
        name: '',
        price: '',
        stock: ''
      },
      editProductData: { // 编辑的商品数据
        name: '',
        price: '',
        stock: ''
      },
      editIndex: -1, // 编辑商品的索引
      searchQuery: '', // 搜索查询关键字
      rules: { // 表单验证规则
        name: [
          { required: true, message: '请输入商品名', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入库存', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    products() {
      return this.$store.state.products; // 获取商品列表数据
    },
    filteredProducts() {
      // 根据搜索查询过滤商品列表
      const query = this.searchQuery.trim().toLowerCase();
      return this.products.filter(product => 
        product.name.toLowerCase().includes(query)
      );
    }
  },
  mounted() {
    // 获取商品数据
    this.$store.dispatch('fetchProducts');
  },
  methods: {
    navigateToDashboard() {
      // 返回仪表盘页面
      this.$router.push({ name: 'dashboard' });
    },
    showAddProductDialog() {
      // 显示添加商品对话框
      this.addProductDialogVisible = true;
    },
    addProduct() {
      // 表单验证并添加商品
      this.$refs.newProductForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('addProduct', this.newProduct);
          this.addProductDialogVisible = false;
          this.newProduct = { // 清空表单数据
            name: '',
            price: '',
            stock: ''
          };
        }
      });
    },
    openEditProductDialog(index) {
      // 打开编辑商品对话框
      this.editProductData = { ...this.products[index] };
      this.editIndex = index;
      this.editProductDialogVisible = true;
    },
    updateProduct() {
      // 表单验证并更新商品
      this.$refs.editProductForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('updateProduct', { index: this.editIndex, product: this.editProductData });
          this.editProductDialogVisible = false;
        }
      });
    },
    deleteProduct(index) {
      // 删除商品
      this.$store.dispatch('deleteProduct', index);
    }
  }
};
</script>
